import React, { useState, useEffect, useCallback } from 'react';

const DinoGame = ({ message = "AI正在思考中..." }) => {
  const [dinoPosition, setDinoPosition] = useState(0);
  const [isJumping, setIsJumping] = useState(false);
  const [cactusPosition, setCactusPosition] = useState(400);
  const [gameSpeed, setGameSpeed] = useState(2);
  const [score, setScore] = useState(0);
  const [gameActive, setGameActive] = useState(true);

  // 跳跃函数
  const jump = useCallback(() => {
    if (!isJumping && gameActive) {
      setIsJumping(true);
      setDinoPosition(100);
      setTimeout(() => {
        setDinoPosition(0);
        setIsJumping(false);
      }, 500);
    }
  }, [isJumping, gameActive]);

  // 键盘事件监听
  useEffect(() => {
    const handleKeyDown = (e) => {
      if (e.code === 'Space' || e.key === 'ArrowUp') {
        jump();
      }
    };

    window.addEventListener('keydown', handleKeyDown);
    return () => window.removeEventListener('keydown', handleKeyDown);
  }, [jump]);

  // 游戏循环
  useEffect(() => {
    if (!gameActive) return;

    const gameLoop = setInterval(() => {
      // 移动仙人掌
      setCactusPosition(prev => {
        if (prev <= -40) {
          setScore(s => s + 1);
          // 每10分增加速度
          if ((s + 1) % 10 === 0) {
            setGameSpeed(speed => Math.min(speed + 0.5, 8));
          }
          return 400;
        }
        return prev - gameSpeed;
      });

      // 碰撞检测
      if (
        cactusPosition > 50 && 
        cactusPosition < 120 && 
        dinoPosition < 40
      ) {
        setGameActive(false);
      }
    }, 16);

    return () => clearInterval(gameLoop);
  }, [cactusPosition, dinoPosition, gameSpeed, gameActive]);

  // 重置游戏
  const resetGame = () => {
    setCactusPosition(400);
    setScore(0);
    setGameSpeed(2);
    setGameActive(true);
  };

  return (
    <div style={{ 
      display: 'flex', 
      flexDirection: 'column',
      alignItems: 'center',
      justifyContent: 'center',
      padding: '20px',
      fontFamily: 'Arial, sans-serif'
    }}>
      <h3 style={{ 
        color: '#666',
        marginBottom: '10px'
      }}>
        {message}
      </h3>
      
      {/* 游戏区域 */}
      <div style={{
        position: 'relative',
        width: '400px',
        height: '150px',
        border: '1px solid #ddd',
        backgroundColor: '#f7f7f7',
        overflow: 'hidden',
        marginBottom: '20px'
      }}>
        {/* 地面 */}
        <div style={{
          position: 'absolute',
          bottom: '0',
          left: '0',
          right: '0',
          height: '20px',
          backgroundColor: '#535353'
        }}></div>
        
        {/* 仙人掌 */}
        <div style={{
          position: 'absolute',
          bottom: '20px',
          left: `${cactusPosition}px`,
          width: '20px',
          height: '40px',
          backgroundColor: '#535353'
        }}></div>
        
        {/* 恐龙 */}
        <div style={{
          position: 'absolute',
          bottom: `${20 + dinoPosition}px`,
          left: '50px',
          width: '30px',
          height: '50px',
          backgroundColor: '#535353',
          transition: 'bottom 0.5s'
        }}></div>
        
        {/* 分数 */}
        <div style={{
          position: 'absolute',
          top: '10px',
          right: '10px',
          fontSize: '20px',
          fontWeight: 'bold',
          color: '#535353'
        }}>
          {score}
        </div>
        
        {/* 游戏结束提示 */}
        {!gameActive && (
          <div style={{
            position: 'absolute',
            top: '50%',
            left: '50%',
            transform: 'translate(-50%, -50%)',
            backgroundColor: 'rgba(255, 255, 255, 0.9)',
            padding: '20px',
            borderRadius: '5px',
            textAlign: 'center'
          }}>
            <div style={{ fontSize: '24px', fontWeight: 'bold', marginBottom: '10px' }}>游戏结束</div>
            <div style={{ marginBottom: '15px' }}>分数: {score}</div>
            <button 
              onClick={resetGame}
              style={{
                padding: '8px 16px',
                backgroundColor: '#4CAF50',
                color: 'white',
                border: 'none',
                borderRadius: '4px',
                cursor: 'pointer'
              }}
            >
              重新开始
            </button>
          </div>
        )}
      </div>
      
      <div style={{ 
        fontSize: '14px',
        color: '#999',
        textAlign: 'center'
      }}>
        按 <kbd style={{ 
          padding: '2px 6px', 
          border: '1px solid #ccc', 
          borderRadius: '3px',
          backgroundColor: '#f5f5f5'
        }}>空格</kbd> 或 <kbd style={{ 
          padding: '2px 6px', 
          border: '1px solid #ccc', 
          borderRadius: '3px',
          backgroundColor: '#f5f5f5'
        }}>↑</kbd> 键让恐龙跳跃
      </div>
    </div>
  );
};

export default DinoGame;